/* eslint-disable no-empty */
<template>
    <div >
        <van-nav-bar
  title="维修厂设备安装登记表"
  left-arrow
  @click-left="back"
/>
<div  class="m10">
  <van-form @submit="onSubmit">
<van-field
  readonly 
  clickable
  required
  name="datetimePicker"
  :value="forms.modifyTime"
  label="日期"
  placeholder="点击选择日期时间"
   right-icon="notes-o"
  @click="showPicker = true"
  :rules="[{ required: true, message: '点击选择日期时间' }]"
  
/>
<van-popup v-model="showPicker" position="bottom">
  <van-datetime-picker
   v-model="currentDate"
   type="date"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>
   <van-field
    v-model="forms.deviceNo"
    name="IMEI"
    label="IMEI"
    disabled
    placeholder="IMEI"
  />
     <van-field
    v-model="forms.deviceType"
    name="设备类型"
    label="设备类型"
    disabled
   
  />

    <van-field
    v-model="forms.vehicleNo"
    name="车牌号"
    label="车牌号"
    required
    placeholder="车牌号"
    :rules="[{ required: true, message: '请填写车牌号' }]"
  />
     <van-field
    v-model="forms.vin"
    name="车架号"
    label="车架号"
    required
    placeholder="车架号"
    :rules="[{ required: true, message: '请填写车架号' }]"
  />
  <!-- <van-field
  readonly
  clickable
  name="picker"
  :value="value"
  required
  label="车型"
    right-icon="arrow-down"
  placeholder="点击选择车型"
  @click="showPickerb = true"
/>
<van-popup v-model="showPickerb" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @confirm="onChoose"
    @cancel="showPickerb = false"
  />
</van-popup> -->
  <van-field required disabled="" :border="false" label="安装图片" label-width="80">

</van-field>
<div class="flex">
  <div> 
   <label for="imgLocal1" v-if="img1.length==0">
                    <img src="../../assets/addimg.png" alt="" style="width:80px;">
                </label>
    <div class="demo1">
                             <input @change="referenceUpload('#imgLocal1','#img1')" style="display:none" type="file" multiple id="imgLocal1"
                        accept="image/*" />
                    <img :src='img1' id="img1" alt="" >
                    <img @click="del(1)" class="del" v-if="!img1.length==0" src="../../assets/icon_shanchuzuzhi_pre.png" alt=""
                        style="width:20px;height:20px">
                        </div>

  </div>

<div>
<p>车头正面照</p>
<p>(需含清晰的车牌号)</p>
</div>
</div>
<div class="flex">
    <div> 
   <label for="imgLocal2" v-if="img2.length==0">
                    <img src="../../assets/addimg.png" alt="" style="width:80px;">
                </label>
    <div class="demo1">
                             <input @change="referenceUpload('#imgLocal2','#img2')" style="display:none" type="file" multiple id="imgLocal2"
                        accept="image/*" />
                    <img :src='img2' id="img2" alt="" >
                    <img @click="del(2)" class="del" v-if="!img2.length==0" src="../../assets/icon_shanchuzuzhi_pre.png" alt=""
                        style="width:20px;height:20px">
                        </div>

  </div>
<div>
<p>驾驶舱室内照</p>
<p>(需含DMS和ADAS设备)</p>
</div>
</div>
<div class="flex">
   <div> 
   <label for="imgLocal3" v-if="img3.length==0">
                    <img src="../../assets/addimg.png" alt="" style="width:80px;">
                </label>
    <div class="demo1">
                             <input @change="referenceUpload('#imgLocal3','#img3')" style="display:none" type="file" multiple id="imgLocal3"
                        accept="image/*" />
                    <img :src='img3' id="img3" alt="" >
                    <img @click="del(3)" class="del" v-if="!img3.length==0" src="../../assets/icon_shanchuzuzhi_pre.png" alt=""
                        style="width:20px;height:20px">
                        </div>

  </div>
<div>
<p>DMS标定截图照</p>
</div>
</div>
<div class="flex">
    <div> 
   <label for="imgLocal4" v-if="img4.length==0">
                    <img src="../../assets/addimg.png" alt="" style="width:80px;">
                </label>
    <div class="demo1">
                             <input @change="referenceUpload('#imgLocal4','#img4')" style="display:none" type="file" multiple id="imgLocal4"
                        accept="image/*" />
                    <img :src='img4' id="img4" alt="" >
                    <img @click="del(4)" class="del" v-if="!img4.length==0" src="../../assets/icon_shanchuzuzhi_pre.png" alt=""
                        style="width:20px;height:20px">
                        </div>

  </div>
<div>

<p>ADAS标定截图照</p>
</div>
</div>
   
 <van-field
    v-model="forms.contacts"
    name="提交人"
    label="提交人"
    required
    placeholder="提交人"
    :rules="[{ required: true, message: '请填写提交人' }]"
  />
     <van-field
    v-model="forms.tel"
    name="联系电话"
    label="联系电话"
    required
    placeholder="请填写联系电话"
    :rules="[{ required: true, message: '请填写联系电话' }]"
  />
  <div class="m10">
    <van-button round block type="info" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>
</div>

    </div>
</template>
<script>

export default {
  data() {
    return {
      forms:{

        modifyTime: '',//时间
         vehicleNo: '',//车牌号
            vin: '',//车架号
         contacts: '',//联系人
            tel: '',//联系电话
         id: '',//id
         photo1: [],//id
       photo2: [],//id
photo3: [],//id
photo4: [],//id
p1change: false,
p2change: false,
p3change: false,
p4change:false,
           
            status: 2,//
      },
       img1: "",
       file_1: "", //文件流
          img2: "",
       file_2: "", //文件流
          img3: "",
       file_3: "", //文件流
          img4: "",
       file_4: "", //文件流
      value: '',
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPickerb: false,
       minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
       currentDate: new Date(),
      showPicker: false,
      timeValue:'',
      info:{},
      id:''
    };
  },
  mounted(){
//  this.forms =  JSON.parse(sessionStorage.getItem("item")); 
//   this.img1 =    this.forms.photo1 || ''
//   this.img2 =    this.forms.photo2|| ''
//    this.img3 =    this.forms.photo3|| ''
//     this.img4 =    this.forms.photo4|| ''
this.id = sessionStorage.getItem("item")
this.getLists(this.id)
  },
  methods: {
    getLists(id){
          this.$api.getContant(id).then(res => {
            if(res.code===0){
                this.forms = res.data
                this.forms.contacts = this.forms.contacts || localStorage.getItem('contacts')
                this.forms.tel = this.forms.tel || localStorage.getItem('tel')
                  this.img1 =    this.forms.photo1 || ''
     this.img2 =    this.forms.photo2|| ''
     this.img3 =    this.forms.photo3|| ''
     this.img4 =    this.forms.photo4|| ''
            } else {
               this.$toast(res.msg)
            }
       
          }).catch(error => {
             this.$toast(error)
          })
    },
      referenceUpload(id,imgid) {
          const fileReader = new FileReader();
        switch(id){
     case '#imgLocal1':
      this.file_1 = document.querySelector(id).files[0];
      this.img1 = "31221";
       this.forms.p1change = true
        fileReader.readAsDataURL(this.file_1); //读取图片
           
       break;
     case '#imgLocal2':
     this.file_2 = document.querySelector(id).files[0];
     this.img2 = "31221";
      this.forms.p2change = true
       fileReader.readAsDataURL(this.file_2); //读取图片
     break;
     case '#imgLocal3':
    this.file_3 = document.querySelector(id).files[0];
    this.img3 = "31221";
     this.forms.p3change = true
      fileReader.readAsDataURL(this.file_3); //读取图片
     break;
     case '#imgLocal4':
    this.file_4 = document.querySelector(id).files[0];
    this.img4 = "31221";
     this.forms.p4change = true
      fileReader.readAsDataURL(this.file_4); //读取图片
     break;
   }
               
          fileReader.addEventListener("load", function () {
                    document.querySelector(imgid).src = fileReader.result;
                });           
               
               
            }, 
             del(num) {
                if (num == 1) {
                    this.file_1 = "";
                    this.img1 = "";
                    this.forms.p1change = true;
                    this.forms.photo1 = null
                    document.querySelector("#img1").src = "";
                } else if (num == 2) {
                    this.file_2 = "";
                    this.img2 = "";
                    this.forms.p2change = true;
                    document.querySelector("#img2").src = "";
                }   else if (num == 3){
                    this.file_3 = "";
                    this.img3 = "";
                     this.forms.p3change = true;
                    document.querySelector("#img3").src = "";
                }else {
                    this.file_4 = "";
                    this.img4 = "";
                     this.forms.p4change = true;
                    document.querySelector("#img4").src = "";
                }
            },
  back (){
        this.$router.go(-1);//返回上一层
    },
    onSubmit() {

     localStorage.setItem('contacts',this.forms.contacts);
     localStorage.setItem('tel',this.forms.tel);
      const params = {
        modifyTime: this.forms.modifyTime,//时间
         vehicleNo: this.forms.vehicleNo,//车牌号
            vin: this.forms.vin,//车架号
         contacts: this.forms.contacts,//联系人
            tel:this.forms.tel,//联系电话
         id: this.forms.id,//id
         photo1: this.file_1,//id
       photo2: this.file_2,//id
photo3: this.file_3,//id
photo4: this.file_4,//id
p1change:this.forms.p1change||false,
p2change:this.forms.p2change||false,
p3change:this.forms.p3change||false,
p4change:this.forms.p4change||false,
            status:  this.forms.status
      }  
       const formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key,params[key]);
                });
       this.$api.submitRegister(formData).then(res => {
            if(res.code===0){
                this.$toast(res.msg)
                this.changePage()
            } else {
               this.$toast(res.msg)
            }
       
          }).catch(error => {
             this.$toast(error)
          })
 
//  if(this.p1change&this.p2change&&this.p3change&&this.p4change){
  
//     else {this.$toast('四张图片需要全部上传')
//  }
    },
        changePage(){
           this.$router.push('/home')
        },
    //  onChoose(value) {
    //   this.value = value;
    //   this.showPickerb = false;
    // },
     onConfirm(val) {
    
      console.log(val)
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }

      this.className = 'timeClass'
      this.value = `${year}-${month}-${day}`
      this.forms.modifyTime = `${year}-${month}-${day}`
      this.showPicker = false;
    },
   

  },
}
</script>
<style scoped>
.m10{
  background: #fff;margin: 10px;
}
.flex{margin-left: 10px;display: flex; font-size: 12px;color: #333;line-height: 10px;;}
.flex div{margin-right:10px}
.flex img{width: 80px;
    height: 80px;}
    .ml{margin-left:20px;}
  .demo1 {
        width: 80px;
        position: relative;
    }

    .del {
        position: absolute;
        top: -10px;
        right: -20px;

    }
    #img1,#img2,#img3,#img4{width: 80px;height: 80px;margin: 0px 10px 10px 0;}
</style>